<template>
  <div class="box">
    <div class="box-main">
      <div class="title">主账号订单信息查看</div>
      <el-form ref="form" :model="ordersParams">
        <el-form-item label="代码(选填)" prop="code">
          <el-input v-model="ordersParams.code" />
        </el-form-item>
        <el-form-item label="时间范围 - 起点(选填)">
          <el-date-picker
            v-model="ordersParams.start"
            type="datetime"
            placeholder="Select date and time"
          />
        </el-form-item>
        <el-form-item label="时间范围 - 终点(选填)">
          <el-date-picker
            v-model="ordersParams.end"
            type="datetime"
            placeholder="Select date and time"
          />
        </el-form-item>
        <el-form-item style="height: 80px;display:flex;align-items: end;">
          <el-button type="primary" @click="getFutuOrderList">查询！</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData">
        <el-table-column prop="code" label="代码" />
        <el-table-column prop="stock_name" label="股票名称" />
        <el-table-column prop="trd_side" label="交易方向" />
        <el-table-column prop="order_type" label="订单类型" />
        <el-table-column prop="order_status" label="订单状态" />
        <el-table-column prop="order_id" label="订单 ID" />
        <el-table-column prop="qty" label="数量" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column prop="updated_time" label="更新时间" />
        <el-table-column prop="dealt_qty" label="已成交数量" />
        <el-table-column prop="dealt_avg_price" label="已成交平均价格" />
        <el-table-column prop="last_err_msg" label="最后错误消息" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="time_in_force" label="有效时间" />
        <el-table-column prop="fill_outside_rth" label="场外交易" />
        <el-table-column prop="aux_price" label="辅助价格" />
        <el-table-column prop="trail_type" label="追踪类型" />
        <el-table-column prop="trail_value" label="追踪值" />
        <el-table-column prop="trail_spread" label="追踪差价" />
        <el-table-column prop="currency" label="货币" />
      </el-table>
    </div>

    <div class="box-main">
      <div class="title">查询订单费用</div>
      <el-form ref="form" :model="orderFeeCodes">
        <el-form-item label="代码(必填)" prop="code">
          <el-input v-model="orderFeeCodes" />
        </el-form-item>
        <el-form-item style="height: 80px;display:flex;align-items: end;">
          <el-button type="primary" @click="getFutuOrderFeeList">查询！</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData2">
        <el-table-column prop="order_id" label="订单 ID" />
        <el-table-column prop="fee_amount" label="费用金额" />
        <el-table-column prop="fee_details" label="费用详情" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import HeadLable from '@/components/HeadLable/index.vue'
import InputAutoComplete from '@/components/InputAutoComplete/index.vue'
import Empty from '@/components/Empty/index.vue'
import { getFutuAccountList, getFutuOrderFeeList, getFutuOrderList } from './api'

@Component({
  name: 'FutuOrderManage',
  components: {
    HeadLable,
    InputAutoComplete,
    Empty
  }
})
export default class FutuOrderManage extends Vue {
  private tableData = []

  private ordersParams = {
    code: '',
    start: '',
    end: ''
  }

  private orderFeeCodes = ''

  created() {
    this.init()
  }

  private async init() {
    await this.getFutuOrderList()
  }

  private async getFutuOrderList() {
    if (this.ordersParams.start !== null && this.ordersParams.start !== '') {
      this.ordersParams.start = this.formatTime(this.ordersParams.start)
    }
    if (this.ordersParams.end !== null && this.ordersParams.end !== '') {
      this.ordersParams.end = this.formatTime(this.ordersParams.end)
    }
    await getFutuOrderList(this.ordersParams)
      .then(res => {
        console.log(res)
        if (String(res.data.code) === '0') {
          this.tableData = res.data && res.data.data
        }
      })
  }

  private formatTime(timeStr) {
    if (timeStr) {
      const date = new Date(timeStr)
      return date.toISOString().split('T')[0]
    }
    return ''
  }

  private async getFutuOrderFeeList() {
    await getFutuOrderFeeList(this.orderFeeCodes)
      .then(res => {
        console.log(res)
        if (String(res.data.code) === '0') {
          this.tableData2 = res.data && res.data.data
        }
      })
  }
}
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;

  .box-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;

    .title {
      font-size: 30px;
      font-weight: 600;
      padding: 10px;
    }
  }
}

.el-form {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 5px;
}
</style>
